<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        #outer {
                display: inline-block;
                width: 200px;
                height: 100px;
                overflow: auto;
        }
        .detector {
               width: 100%;
               height: 0px;
        }
        .entry {
                display: inline-block;
                width: 200px;
        }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
               var outer = $("#outer");
               var detector = $("#outer .detector");
               var scrollsize = 200 - detector.width();
               outer.width(200 + scrollsize);
            });
        </script>
</head>
<body>
<div id="outer">
   <div class="detector">
   </div>
   <div class="entry">
   I'm a short entry
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
</div>
</body>
</html>
